<template>
  <div id="content">
    <div class="left">
      <!--      文章内容-->
      <ArticleContent></ArticleContent>
      <!--      评论输入框-->
      <CommentInput></CommentInput>
      <!--      评论列表-->
      <CommentList></CommentList>
    </div>
    <div class="right" id="content_right" @click="getDirectory" :class="{iscontent_right:height >= 650}">
      <!--      悬浮目录-->
      <FloatingDirectory></FloatingDirectory>
    </div>
  </div>
</template>

<script>
import ArticleContent from './ArticleContent'
import CommentInput from './CommentInput'
import CommentList from './CommentList'
import FloatingDirectory from './FloatingDirectory'
import {mapActions, mapState} from "vuex"


export default {
  name: "Article",
  components: {
    ArticleContent,
    CommentInput,
    CommentList,
    FloatingDirectory
  },
  methods: {
    ...mapActions('Article', ['getArticlecontent', 'getComment']),
    ...mapActions('Rotation', ['getRotation']),
    // 悬浮目录
    getDirectory() {
    },
  },
  mounted() {
    // 确保数据都可以获取到
    setTimeout(() => {
      let usernid
      if (this.$store.state.userinfo) {
        usernid = this.$store.state.userinfo.nid
      } else {
        usernid = -1
      }
      this.getArticlecontent({nid: this.$route.params.id, usernid,})
      this.getComment(this.$route.params.id)
      this.getRotation({
        type: this.$route.meta.type,
        nid: this.$route.params.id
      })
    }, 50)
  },
  computed: {
    ...mapState(['height'])
  }
}
</script>

<style scoped lang="less">
#content {
  .left {
    width: 65%;
    position: relative;
    left: -90px;
    z-index: 0;
  }

  > .right {
    height: 300px;
    min-height: 200px;
    width: 15%;
    position: absolute;
    top: 20px;
    right: 100px;
    border-radius: 5px;
  }

  // 悬浮目录固定的样式
  .iscontent_right {
    position: fixed;
    top: 70px;
    right: 115px;
  }
}
</style>